<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button class="filter-item" @click="handleAdd(pid)" type="primary" icon="el-icon-plus">添加</el-button>
      <el-input class="filter-item" @keyup.enter.native="handleFilter" style="width: 200px;" placeholder="请输入关键词" v-model="search.keyword"></el-input>
      <el-button class="filter-item" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" v-waves @click="handleToZip" v-loading="toziploading">导出</el-button>
      <el-button class="filter-item" v-waves @click="inZip=true">导入</el-button>
    </div>
    <tree-table :data="tableData" :columns="columns" border :expandAll="true" ref="tree">
      <el-table-column show-overflow-tooltip label="级别" align="center" width="100">
        <template slot-scope="scope">
          <el-tag size="mini" v-if="!scope.row.isDirectory">目录</el-tag>
          <el-tag size="mini" type="info" v-else>{{['模块','频道','详情','类别','单页','tags'][scope.row.status]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="大小(kb)" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.isDirectory ? scope.row.size:''}}
        </template>
      </el-table-column>
      <el-table-column label="更新日期" align="center" width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.lastModifiedDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" @click="handleAdd(scope.row.templetId)" v-if="!scope.row.isDirectory">添加下级</el-button>
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" v-if="!scope.row.children.length">删除</el-button>
          <el-button size="mini" @click="handleLook(scope.$index, scope.row)" v-if="scope.row.status > 0">可视化</el-button>
        </template>
      </el-table-column>
    </tree-table>
    <edit v-if="edit" :data="selectTable" @setData="setData"></edit>
    <inZip v-if="inZip" @getData="getData"></inZip>
  </div>
</template>

<script>
import * as api from '@/utils/api'
import waves from '@/directive/waves'
import { parseTime } from '@/utils'
export default {
  directives: {
    waves
  },
  data() {
    return {
      columns: [
        {
          text: '名称',
          value: 'templetName'
        }
      ],
      pid: 0, // 根目录id
      tableData: [],
      search: {
        keyword: ''
      },
      selection: [],
      selectTable: {},
      pload: false,
      edit: false,
      createStatus: false,
      toziploading: false,
      inZip: false
    }
  },
  components: {
    edit: () => import('./edit'),
    treeTable: () => import('@/components/TreeTable'),
    inZip: () => import('./inZip')
  },
  created() {
    this.getData()
  },
  methods: {
    handleAdd(pid) {
      this.selectTable = {
        method: 'add',
        parentId: pid
      }
      this.edit = true
    },
    handleEdit(index, row) {
      this.selectTable = {
        method: 'edit',
        templetId: row.templetId
      }
      this.edit = true
    },
    handleLook(index, row) {
      this.$store.dispatch('setLookObj', { templetId: row.templetId, templetName: row.templetName, status: row.status })
      this.$router.push('/sysTplLook/index')
    },
    async handleDelete(index, row) {
      this.$confirm('确认要删除吗', { type: 'warning' }).then(async() => {
        try {
          this.pload = false
          await api.templetRemove({ templetId: row.templetId })
          this.$notify({ title: '删除成功', type: 'success', duration: 3000 })
          const fn = m => {
            m.some(item => {
              if (item.templetId === row.parentId) {
                item.children.splice(item.children.indexOf(row), 1)
                return true
              } else {
                if (item.children.length) {
                  fn(item.children)
                }
              }
            })
          }

          if (row.parentId === this.pid) {
            this.tableData.splice(this.tableData.indexOf(row), 1)
          } else {
            fn(this.tableData)
          }
        } catch (e) {
          this.pload = true
        }
      })
    },
    setData(data) {
      console.log(data)
      if (this.selectTable.method === 'add') {
        data.children = []
        if (data.parentId === this.pid) {
          this.tableData.push(data)
        } else {
          const fn = m => {
            m.some(item => {
              if (item.templetId === data.parentId) {
                item.children.push(data)
                return true
              } else {
                if (item.children.length) {
                  fn(item.children)
                }
              }
            })
          }
          fn(this.tableData)
        }
      } else {
        this.getData()
      }
    },
    async getData() {
      const data = this.JSONo(
        {
        },
        this.search
      )
      this.pload = false
      const Datas = await api.templetList(data)
      this.tableData = Datas[0].children
      this.pid = Datas[0].templetId
      this.pload = true
    },
    handleFilter() {
      this.getData()
    },
    async handleToZip() {
      this.$confirm('确认要导出吗', { type: 'warning' }).then(async() => {
        try {
          this.toziploading = true
          require('script-loader!file-saver')
          const Datas = await api.templetToZip({})
          // eslint-disable-next-line
          saveAs(Datas, `站点${this.$store.state.site.siteId}模板#${parseTime(new Date(),'{y}{m}{d}-{hh}{ii}{ss}')}.zip`)
          this.$notify({ title: '导出成功', type: 'success', duration: 3000 })
        } catch (e) {
          console.log(e)
        }
        this.toziploading = false
      })
    }
  }
}
</script>